<template>
  <div>
    <h1>{{ msg }}  当前路径:{{this.$router.currentRoute.fullPath}}</h1>
    <router-link to="/">Home</router-link>
    <table class="table table-hover">
      <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Op</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in userList" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.username}}</td>
        <td>{{user.password}}</td>
        <td><button @click="hello">操作</button></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'user',
  data () {
    return {
      msg: '欢迎来到菜鸟教程zhangyi',
      site: '菜鸟是你爸爸zhangyi',
      userList: []
    }
  },
  created () {
    this.users()
  },
  methods: {
    users: function () {
      var req = {
        method: 'post',
        url: 'http://127.0.0.1:9400/auth/v1/users',
        withCredentials: true,
        route: this.$router,
        userList: this.userList,
        $proxy: this
      }

      this.$axios.get(req.url, {headers: {'authorization': this.$global.token}}).then(function (value) {
        value.data.ResponseUtil.data.forEach(function (value2) {
          req.$proxy.userList.push(value2)
        })
      })
    },
    hello: function (data) {
      console.log(md5(this.msg + '学习' + data))
      alert('nihao')
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }

  .class1{
    background: #444;
    color: #eee;
  }
</style>
